import React, {Component} from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';
import {Progress, Button} from 'antd';
import Ajax from '../../common/ajax';

class CutList extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 114,
            style: {},
            dataset: {}
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            list: [],
            timerStrs: {}
        };
    }

    componentDidMount() {
        this._fetch();
    }

    componentWillUnmount() {
        this._timerId && clearTimeout(this._timerId)
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {list, timerStrs} = this.state;
        var {style, dataset} = data;

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'cutList cmptEle': true, 'cmptEle_selected': selected})}
                style={style}
            >
                <div className="cutList">
                    {
                        list && list.length > 0 ?
                            list.map(function (item, index) {
                                return (
                                    <div className="cutItem" key="id">
                                        <div className="cutItem__tag">
                                            <div className="cutItem__amount">{item.haggle_total}人已砍价</div>
                                            <div className="cutItem__timer">{timerStrs[index]}</div>
                                        </div>
                                        <div
                                            className="cutItem__imgWrap"
                                            style={{backgroundImage: 'url(' + item['goods_info']['image_url'] + ')'}}
                                        ></div>
                                        <div className="cutItem__info">
                                            <div className="cutItem__title">{item['goods_info']['name']}</div>
                                            <div className="cutItem__foot">
                                                <div className="cutItem__priceWrap">
                                                    <div className="cutItem__price cutItem__price_min">
                                                        底价:
                                                        <span className="cutItem__price__val">￥{item.active_price}</span>
                                                    </div>
                                                    <div className="cutItem__price">
                                                        原价:￥{item.goods_info['original_price']}
                                                    </div>
                                                </div>
                                                <Button type="primary" className="cutBtn">砍一刀</Button>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                            :
                            <div className="cutList__empty">砍价活动空空如也~</div>
                    }
                </div>
            </div>
        );
    }

    _fetch() {
        var _self = this;

        _self._timerList = {};
        Ajax.G('/openapi/CActivity/haggleActList', {}, function (data) {
            var list = data.result;

            list.forEach(function (actItem, index) {
                var leftTime = actItem.left_time;

                if (leftTime > 0) {
                    _self._timerList[index] = leftTime;
                }
            });

            _self.setState({
                list,
                timerStrs: {}
            });

            if (_self._timerId) {
                clearTimeout(_self._timerId);
            }
            _self._timerDown();
        });
    }

    _timerDown() {
        var _self = this;
        var timerStrs = _self.state.timerStrs;
        var _timerList = _self._timerList;
        var isOver = true;

        Object.keys(_timerList).forEach(function (key) {
            var sec = _timerList[key];

            timerStrs[key] = _self._getTimeBySec(sec);

            if (sec == 0) {
                _self._fetch();
                return;
            }

            isOver = false;
            _timerList[key] = --sec;
        });

        if (isOver) {
            return;
        }

        _self.setState({
            timerStrs,
        });
        _self._timerId = setTimeout(() => {
            _self._timerDown();
        }, 1000);
    }

    _getTimeBySec(sec) {
        var h = parseInt(sec / 3600);
        var m = parseInt((sec - h * 3600) / 60);
        var s = sec - h * 3600 - m * 60;
        var d = parseInt(h / 24);

        h = h - d * 24;

        return d + '天' + formatNumber(h) + '时' + formatNumber(m) + '分' + formatNumber(s) + '秒';

        function formatNumber(n) {
            n = n.toString()
            return n[1] ? n : '0' + n
        }
    }
}

export default CutList;
